<template>
  <div>
    <div style="background-color:aqua"><h1 align='right'>云程平台欢迎您：季亚楠同学</h1></div>
      <h1 align='center'>用户管理</h1> 

      账号：<input type="text" v-model="zhanghao" placeholder="请输入账号" > 姓名：  <input type="text" v-model="name" placeholder="请输入姓名">
       手机号：  <input type="text" v-model="phone" placeholder="请输入手机号"> <button @click="chaget">查询</button> <button @click="btn_cz">重置</button>
      <p><button @click="btn_x">+新增</button> <button @click="btn_del_all">删除</button> <van-uploader :after-read="afterRead"><button>导入</button></van-uploader> <button @click="daochu" >导出</button> <button @click="daochu" >冻结</button>  <button @click="daochu" >解冻</button> <button @click="daochu" >回收站</button>
      </p>
      <table border="1" cellspacing='0'>
        <tr>
           <td><input type="checkbox" v-model="all" @click="btn_sel"></td>
          <td>账号</td>
          <td>姓名</td>
          <td>性别</td>
          <td>手机号</td>
          <td>邮箱</td>
          <td>工号</td>
          <td>状态</td>
          <td>操作</td>
        </tr>
          <tr v-for="i in list1" :key="i.id">
          <td><input type="checkbox" v-model="i.sel"></td>
          <td>{{i.zhanghao}}</td>
          <td>{{i.name}}</td>
          <td>{{i.gender}}</td>
          <td>{{i.phone}}</td>
          <td>{{i.youx}}</td>
          <td>{{i.num}}</td>
          <td>{{i.ztai}}</td>
          <td><span @click="btn_xx(i.id)">编辑</span>|更多
          <select name="" id="">
            <option value=""></option>
            <option value=""><span @click="btn_gett">详情</span></option>
            <option value="">密码</option>
            <option value="">删除</option>
            <option value="">冻结</option>
          </select>
          <span @click="btn_del(i.id)">删除</span></td>
        </tr>
      </table>
      <div v-show="flag">
      <p>账号:  <input type="text" v-model="form.zhanghao" placeholder="请输入账号" ></p>
      <p>姓名:  <input type="text" v-model="form.name" placeholder="请输入姓名"></p>
      <p>性别:  <input type="text" v-model="form.gender" placeholder="请输入性别"></p>
      <p>手机号:  <input type="text" v-model="form.phone" placeholder="请输入手机号 "></p>
      <p>邮箱:  <input type="text" v-model="form.youx" placeholder="请输入邮箱"></p>
      <p>工号:  <input type="text" v-model="form.num" placeholder="请输入工号"></p>
      <p>状态:  <input type="text" v-model="form.ztai" placeholder="请输入状态"></p>
      <button @click="btn_post">添加</button>
      </div>
      <div v-show="flag2">
      <p>账号:  <input type="text" v-model="form.zhanghao" placeholder="请输入账号" ></p>
      <p>姓名:  <input type="text" v-model="form.name" placeholder="请输入姓名"></p>
      <p>性别:  <input type="text" v-model="form.gender" placeholder="请输入性别"></p>
      <p>手机号:  <input type="text" v-model="form.phone" placeholder="请输入手机号 "></p>
      <p>邮箱:  <input type="text" v-model="form.youx" placeholder="请输入邮箱"></p>
      <p>工号:  <input type="text" v-model="form.num" placeholder="请输入工号"></p>
      <p>状态:  <input type="text" v-model="form.ztai" placeholder="请输入状态"></p>
      <button @click="btn_put">编辑</button>
      </div>
  </div>
</template>

<script>
export default {
data(){
  return{
    list1:[],
    form:{},
    flag:false,
    flag2:false,
    name:"",
    bianm:"",
    all:false,
    zhanghao:'',
    phone:'',
  }
},
methods:{
     afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let formdata = new FormData()
      formdata.append('file',file.file)
      this.axios.post('daor',formdata).then(res=>{
        alert(res.data.mes)
        this.btn_get()
      })
    },
  daochu(){
    this.axios.get('/dao').then(res=>{
      window.location.href=res.data.url
    })
  },
  btn_sel(){
    this.list1.forEach(res=>{
      res.sel=!this.all
    })
  },
  btn_gett(id){
    this.axios.get('/users?id='+id).then(res=>{
      this.form=res.data.list
      
    })
  },
  btn_get(){
    this.axios.get('/users').then(res=>{
      this.list1=res.data.list
      
    })
  },
  btn_del_all(){
    this.list1.forEach(element => {
      console.log(element.id)
      if(element.sel==true){
        this.axios.delete('/users?id='+element.id).then(res=>{
          console.log(res)
        })
      }
    });
    this.btn_get()
  },
  btn_del(id){
    console.log(id);
    this.axios.delete('/users',{
      params:{
        'id':id
      }
    }).then(res=>{
      alert(res.data.mes)
      this.btn_get()
    })
  },
  btn_post(){
    this.axios.post('/users',this.form).then(res=>{
      this.form=res.data
      alert(res.data.mes)
      this.flag=false
      this.btn_get()
    })
  },
  btn_x(){
    if(this.flag==false){
      this.flag=true
    }else{
      this.flag=false
    }
  },
    btn_xx(id){
    if(this.flag2==false){
      this.form.id=id
      this.btn_gett(id)
      this.flag2=true
    }else{
      this.flag2=false
    }

  },
  chaget(){
    this.axios.get('/users?name='+this.name+'&zhanghao='+this.zhanghao+'&phone='+this.phone).then(res=>{
      this.list1=res.data.list
    })
  },
  btn_put(){
    this.axios.put('/users',{'name':this.form.name,'gender':this.form.gender,'phone':this.form.phone,'id':this.form.id,'youx':this.form.youx,'num':this.form.num,'ztai':this.form.ztai,'zhanghao':this.form.zhanghao}).then(res=>{
      this.form=res.data
      alert(res.data.mes)
      this.flag2=false
      this.btn_get()
    })
  }
},
mounted(){
  this.btn_get()
}
}
</script>

<style>

</style>